<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%  
	String path = request.getContextPath();  
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="<%=basePath %>static/common/bootstrap/css/bootstrap.min.css">
		<link href="<%=basePath %>static/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" rel="stylesheet">
		<!-- jquery 文件 -->
		<script src="<%=basePath %>static/js/jquery-3.1.1.js"></script> 
		<!-- bootstrap。js 文件 -->
		<script src="<%=basePath %>static/common/bootstrap/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!-- bootstarp-table 文件 -->
		<script src="<%=basePath %>static/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js"></script>
		<script src="<%=basePath %>static/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
<center>
<br>
<center>
<div style="height:40px;background-color: white;"  data-options="region:'north',split:false">
	<table align="left" class="searchContent" style="font-weight: bold;font-size: 15px">
		<tr align="center">
			<td colspan="2">
				<!-- 添加按钮 -->
				<button type="button" class="btn btn-primary btn-sm glyphicon glyphicon-download-alt" data-toggle="modal" data-target="#myModal">添加</button>
				<!-- 颜值配置按钮 -->
				<button type="button" class="btn btn-primary btn-sm glyphicon glyphicon-cog" data-toggle="modal" data-target="#myModal2" onclick="yanzhipeizhi()">颜值配置</button>
			</td>
			</tr>
	</table>
</div>
</center>

</center>
	<form id="formss" method="post">
  	<table class="table table-hover">
		<tr>
			<th style="text-align:left;">编号</th>
			<td>购买颜值数量</td>
			<td>赠送颜值数量</td>
			<td>备注</td>
			<td>创建时间</td>
			<td>修改时间</td>
			<td colspan="2" align="center">操作</td>
		</tr>
		<c:forEach items="${list}" var="beauty" varStatus="s">
		<tr>
			<td align="left">${s.index+1 }</td>
			<td>${beauty.buy_num}</td>
			<td>${beauty.give_num}</td>
			<td>${beauty.remark}</td>
			<td>${beauty.create_time}</td>
			<td>${beauty.modify_time}</td>
			<td align="center" colspan="2">
				<button class="btn btn-default btn-xs glyphicon glyphicon-pencil" onclick="querybeautybyid(${beauty.config_id})">修改</button>
				<button class="btn btn-default btn-xs glyphicon glyphicon-remove" onclick="del(${beauty.config_id})">删除</button>
			</td>
		</tr>
		</c:forEach>
	</table>
	</form>
	<div class="layui-inline" align="center">
	  <a href="#" class="layui-btn layui-btn-normal" onclick="up()">上一页</a>
	  <a href="#" class="layui-btn layui-btn-normal" onclick="next()" >下一页</a>
	</div>
	 
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true data-backdrop="static">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">颜值配置信息操作</h4>
	      </div>
	      <div class="modal-body">
	      <!-- 表单 -->
	        <form class="form-horizontal" role="form" action="<%=basePath%>insertupdateconfig">
	        <input type="hidden" id="config_id" name="config_id">
	        
			  <div class="form-group">
			    <label for="buy_num" class="col-sm-2 control-label">购买颜值数量:</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="buy_num" name="buy_num">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="give_num" class="col-sm-2 control-label">赠送颜值数量:</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="give_num" name="give_num">
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="remark" class="col-sm-2 control-label">备注:</label>
			    <div class="col-sm-10">
			     <textarea class="form-control" rows="3" name="remark" id="remark"></textarea>
			    </div>
			  </div>
				<div class="modal-footer">
		        <button type="button" class="btn btn-primary glyphicon glyphicon-remove" data-dismiss="modal">关闭</button>
		        <input type="submit" class="btn btn-primary glyphicon glyphicon-ok" value="提交"/>
		      </div>
			</form>
	      </div>
	      
	      
	    </div>
	  </div>
	</div>
	
	
	
	
	<!-- Modal -->
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true data-backdrop="static">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">颜值配置信息操作</h4>
	      </div>
	      <div class="modal-body">
	      <!-- 表单 -->
	       <form  method="post" id="form2" action="<%=basePath %>saveConfig">
		     	<div class="form-group" >
				    <label for="inputEmail3" class="col-sm-4 control-label">一元人名币可兑换：</label>
				    <div class="col-sm-6" >
				      <input type ="number" min="0" max="10000000"  class="form-control" id="beautyNum"  name="beautyNum" value="">
				    </div>
				    <label for="inputEmail3" class="col-sm-2 control-label">个颜值</label><br><br>
				</div><br>
				<div class="form-group" align="center">
				    <label for="inputPassword3" class="col-sm-4 control-label">颜值有效期</label>
				    <div class="col-sm-6">
				      <input type ="number" min="0" max="10000000"  class="form-control" id="hasDay"  name="hasDay" value="">
				    </div>
				    <label for="inputEmail3" class="col-sm-2 control-label">天</label><br><br>
			    </div>		      
		       <div class="modal-footer" align="center">
			        <button type="button" class="btn btn-primary glyphicon glyphicon-remove" data-dismiss="modal">退出</button>
			        <button type="submit" class="btn btn-primary glyphicon glyphicon-ok" onclick="baocun()">保存</button>
			   </div>
		   </form>
		   </div>
	  </div>
	</div>
	</div>
	
	
</div>
</body>
</html>
<script>
	
	//重置
	function reset(){
		$("#config_id").val("");
		$("#buy_num").val("");
		$("#give_num").val("");
		$("#remark").val("");
	}
	
	
	//清空下拉框
	$('#myModal').on('hidden.bs.modal', function (e) {
	 	reset();
	})

	function del(config_id){
		console.log(config_id);
		if(window.confirm("你确定要删除该颜值基本设置信息吗 ？")){
			 window.location.href="<%=basePath%>del/"+config_id; 
		}
	} 
	
	function querybeautybyid(config_id){
		console.log(config_id);
		$.ajax({
			type:"POST",
			url:"<%=basePath%>toupdate/"+config_id,
			dataType:"json",
			success: function(beauty){
				console.log(beauty.config_id);
				 $("#config_id").val(beauty.config_id);
				$("#buy_num").val(beauty.buy_num);
				$("#give_num").val(beauty.give_num);
				$("#remark").val(beauty.remark); 
				$('#myModal').modal('show');
		   }
		});
	}
	

	//颜值配置
	function yanzhipeizhi(){ 
		$.post("<%=basePath%>getDataFromRedis",function(msg){
			//alert(msg)
			var data=msg.split(":");
			$("#myModal2").modal("show");
			$("#beautyNum").val(data[0]);
			$("#hasDay").val(data[1])
		});
	}
	function baocun(){
		$("#myModal1").modal("hide");
	    document.form2.submit();
	}

	//上一页
	function up(){
		formss.action="<%=basePath%>querybeautyconfig?page=${info.prePage}";
		formss.submit();
	};
	//下一页
	function next(){
		formss.action="<%=basePath%>querybeautyconfig?page=${info.nextPage}";
		formss.submit();
	};
</script>
